<template>
  <div class="container">
    <div class="page-header">
      <div class="back-button">
        <el-button @click="$router.push('/main/biao')" icon="el-icon-back"
          >返回</el-button
        >
      </div>
      <h1>三级安全教育/制度教育/技能教育培训卡</h1>
    </div>

    <div class="main-content">
      <div class="form-actions">
        <el-button
          type="success"
          @click="saveData"
          icon="el-icon-check"
          :disabled="isView"
          >保存</el-button
        >
        <el-button type="" @click="goToList" icon="el-icon-menu"
          >列表</el-button
        >
        <el-button type="info" @click="handlePrint" icon="el-icon-printer"
          >打印</el-button
        >
      </div>

      <div class="print-content">
        <div class="print-header">
          <h2>三级安全教育/制度教育/技能教育培训卡</h2>
        </div>

        <el-form :model="formData" label-position="center" class="training-form">
          <!-- 基本信息表格 -->
          <table class="info-table" border="1">
            <tr>
              <td class="label-cell">姓名</td>
              <td><el-input v-model="formData.name" :disabled="isView" /></td>
              <td class="label-cell">班组</td>
              <td><el-input v-model="formData.team" :disabled="isView" /></td>
            </tr>
            <tr>
              <td class="label-cell">身份证号码</td>
              <td><el-input v-model="formData.idCard" :disabled="isView" /></td>
              <td class="label-cell">工种</td>
              <td>
                <el-input v-model="formData.jobType" :disabled="isView" />
              </td>
            </tr>
            <tr>
              <td class="label-cell">入职日期</td>
              <td>
                <el-date-picker
                  v-model="formData.entryDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  :disabled="isView"
                />
              </td>
              <td class="label-cell">建卡日期</td>
              <td>
                <el-date-picker
                  v-model="formData.cardCreateDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  :disabled="isView"
                />
              </td>
            </tr>
          </table>

          <!-- 教育培训内容表格 -->
          <div class="education-section">
            <div class="section-header">
              一、入职教育培训内容
              <div class="section-subtitle">
                （1、侧重宣贯安全法律法规和国家、部、省相关安全管理文件；2、侧重公司各项规章制度培训。）
              </div>
            </div>
            <table class="education-table" border="1">
              <tr>
                <td colspan="2" class="sub-header">教育人</td>
                <td colspan="2" class="sub-header">受教育人</td>
              </tr>
              <tr>
                <td class="label-cell">职务：</td>
                <td>
                  <el-input
                    v-model="formData.education1.educatorPosition"
                    :disabled="isView"
                  />
                </td>
                <td class="label-cell">工种：</td>
                <td>
                  <el-input
                    v-model="formData.education1.educatedJobType"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td colspan="4" class="content-cell">
                  1、国家的有关安全生产法律、法规、企业安全管理制度、一般安全技术知识、企业的安全生产特点、重大典型事故案例、安全注意事项、消防安全培训及逃生注意事项，工业卫生职业病的预防等知识。<br />
                  2、各项规章制度：《考勤管理制度》《加班管理制度》《薪酬管理制度》《奖惩管理制度》《宿舍管理制度》等。
                </td>
              </tr>
              <tr>
                <td colspan="2" class="signature-cell">
                  <div class="signature-row">
                    <span class="signature-label">签名：</span>
                    <el-input
                      v-model="formData.education1.educatorSignature"
                      class="signature-input"
                      :disabled="isView"
                    />
                  </div>
                  <div class="signature-row">
                    <span class="signature-label">日期：</span>
                    <el-date-picker
                      v-model="formData.education1.educatorDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="signature-date"
                      :disabled="isView"
                    />
                  </div>
                </td>
                <td colspan="2" class="signature-cell">
                  <div class="signature-row">
                    <span class="signature-label">签名：</span>
                    <el-input
                      v-model="formData.education1.educatedSignature"
                      class="signature-input"
                      :disabled="isView"
                    />
                  </div>
                  <div class="signature-row">
                    <span class="signature-label">日期：</span>
                    <el-date-picker
                      v-model="formData.education1.educatedDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="signature-date"
                      :disabled="isView"
                    />
                  </div>
                </td>
              </tr>
            </table>
          </div>

          <!-- 第二部分：车间教育 -->
          <div class="education-section">
            <div class="section-header">
              二、车间对作业人员教育内容
              <div class="section-subtitle">
                （1、侧重教育进入车间应遵守的各项规章制度及相关安全操作规程；2、车间管理制度）
              </div>
            </div>
            <table class="education-table" border="1">
              <!-- 与第一部分相似的结构，使用education2的数据 -->
              <tr>
                <td colspan="2" class="sub-header">教育人</td>
                <td colspan="2" class="sub-header">受教育人</td>
              </tr>
              <tr>
                <td class="label-cell">职务：</td>
                <td>
                  <el-input
                    v-model="formData.education2.educatorPosition"
                    :disabled="isView"
                  />
                </td>
                <td class="label-cell">工种：</td>
                <td>
                  <el-input
                    v-model="formData.education2.educatedJobType"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td colspan="4" class="content-cell">
                  1、车间工艺特点及流程、主要设备的性能、安全技术规程、车间安全管理制度、事故教训、防护用品、防护措施的使用方法、安全注意事项等。
                  <br />2、车间管理制度。
                </td>
              </tr>
              <tr>
                <td colspan="2" class="signature-cell">
                  <div class="signature-row">
                    <span class="signature-label">签名：</span>
                    <el-input
                      v-model="formData.education2.educatorSignature"
                      class="signature-input"
                      :disabled="isView"
                    />
                  </div>
                  <div class="signature-row">
                    <span class="signature-label">日期：</span>
                    <el-date-picker
                      v-model="formData.education2.educatorDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="signature-date"
                      :disabled="isView"
                    />
                  </div>
                </td>
                <td colspan="2" class="signature-cell">
                  <div class="signature-row">
                    <span class="signature-label">签名：</span>
                    <el-input
                      v-model="formData.education2.educatedSignature"
                      class="signature-input"
                      :disabled="isView"
                    />
                  </div>
                  <div class="signature-row">
                    <span class="signature-label">日期：</span>
                    <el-date-picker
                      v-model="formData.education2.educatedDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="signature-date"
                      :disabled="isView"
                    />
                  </div>
                </td>
              </tr>
            </table>
          </div>

          <!-- 第三部分：班组教育 -->
          <div class="education-section">
            <div class="section-header">
              三、班组对作业人员教育内容
              <div class="section-subtitle">
                （1、侧重在进入本岗位的安全操作教育以及班组安全制度、纪律教育等；2、岗位技能培训）
              </div>
            </div>
            <table class="education-table" border="1">
              <!-- 与前两部分相似的结构，使用education3的数据 -->
              <tr>
                <td colspan="2" class="sub-header">教育人</td>
                <td colspan="2" class="sub-header">受教育人</td>
              </tr>
              <tr>
                <td class="label-cell">职务：</td>
                <td>
                  <el-input
                    v-model="formData.education3.educatorPosition"
                    :disabled="isView"
                  />
                </td>
                <td class="label-cell">工种：</td>
                <td>
                  <el-input
                    v-model="formData.education3.educatedJobType"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td colspan="4" class="content-cell">
                  1、车间工艺特点及流程、设备的性能、机台的维护保养点检、安全技术规程、车间安全管理制度、事故教训、防护用品、防护措施的使用方法、安全注意事项等。<br />
                  2、岗位技能培训。
                </td>
              </tr>
              <tr>
                <td colspan="2" class="signature-cell">
                  <div class="signature-row">
                    <span class="signature-label">签名：</span>
                    <el-input
                      v-model="formData.education3.educatorSignature"
                      class="signature-input"
                      :disabled="isView"
                    />
                  </div>
                  <div class="signature-row">
                    <span class="signature-label">日期：</span>
                    <el-date-picker
                      v-model="formData.education3.educatorDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="signature-date"
                      :disabled="isView"
                    />
                  </div>
                </td>
                <td colspan="2" class="signature-cell">
                  <div class="signature-row">
                    <span class="signature-label">签名：</span>
                    <el-input
                      v-model="formData.education3.educatedSignature"
                      class="signature-input"
                      :disabled="isView"
                    />
                  </div>
                  <div class="signature-row">
                    <span class="signature-label">日期：</span>
                    <el-date-picker
                      v-model="formData.education3.educatedDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="signature-date"
                      :disabled="isView"
                    />
                  </div>
                </td>
              </tr>
            </table>
          </div>

          <div class="note-section">
            说明：作业人员变更工种后，须重新建立培训卡。
          </div>

          <div class="form-footer">
            <div class="form-info">
              <span>表单编号及版本：AM - JY - 051 A/1</span>
              <span>保存期限：长期</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getById, saveOrUpdate } from "@/api/safety-training-card";

export default {
  data() {
    return {
      formData: {
        name: "",
        team: "",
        idCard: "",
        jobType: "",
        entryDate: "",
        cardCreateDate: "",
        education1: {
          educatorPosition: "",
          educatorSignature: "",
          educatorDate: "",
          educatedJobType: "",
          educatedSignature: "",
          educatedDate: "",
        },
        education2: {
          educatorPosition: "",
          educatorSignature: "",
          educatorDate: "",
          educatedJobType: "",
          educatedSignature: "",
          educatedDate: "",
        },
        education3: {
          educatorPosition: "",
          educatorSignature: "",
          educatorDate: "",
          educatedJobType: "",
          educatedSignature: "",
          educatedDate: "",
        },
      },
      isView: false,
      isEdit: false,
    };
  },
  created() {
    const { id, type } = this.$route.query;
    if (id) {
      this.loadData(id);
      this.isView = type === "view";
      this.isEdit = type === "edit";
    }
  },
  methods: {
    async loadData(id) {
      try {
        const { data } = await getById(id);
        this.formData = data;
      } catch (error) {
        this.$message.error("加载数据失败");
      }
    },
    async goToList() {
      this.$router.push({
        name: "SanjianquanList",
      });
    },
    async saveData() {
      // 数据验证
      if (!this.formData.name) {
        this.$message.error("姓名不能为空");
        return;
      }
      if (!this.formData.team) {
        this.$message.error("班组不能为空");
        return;
      }
      if (!this.formData.idCard) {
        this.$message.error("身份证号码不能为空");
        return;
      }

      try {
        await saveOrUpdate(this.formData);
        this.$message.success("保存成功");
        this.$router.push({
          name: "SanjianquanList",
          query: {
            id: this.formData.id,
          },
        });
      } catch (error) {
        this.$message.error("保存失败");
      }
    },
    handlePrint() {
      window.print();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  min-height: 100vh;
  position: relative;
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  h1 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409eff, #67c23a);
      border-radius: 3px;
    }
  }
}

.back-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.main-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.form-actions {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.training-form {
  .info-table,
  .education-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    margin-bottom: 24px;

    td {
      padding: 12px;
      border: 1px solid #ebeef5;
      vertical-align: middle;
    }
  }

  .label-cell {
    background-color: #f8f9fa;
    font-weight: 500;
    color: #2c3e50;
    width: 120px;
    text-align: center;
  }

  .content-cell {
    padding: 16px;
    line-height: 1.6;
    color: #2c3e50;
    background-color: #fff;
  }
}

.education-section {
  margin-bottom: 30px;

  .section-header {
    background-color: #f0f7ff;
    color: #1890ff;
    font-weight: bold;
    text-align: center;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;

    .section-subtitle {
      font-size: 14px;
      color: #606266;
      font-weight: normal;
      margin-top: 8px;
    }
  }

  .sub-header {
    background-color: #f8f9fa;
    color: #2c3e50;
    font-weight: 500;
    text-align: center;
    padding: 12px;
  }
}

.signature-cell {
  padding: 16px;
  background-color: #f8f9fa;

  .signature-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;

    .signature-label {
      min-width: 60px;
      color: #2c3e50;
    }

    .signature-input {
      max-width: 150px;
    }

    .signature-date {
      width: 150px;
    }
  }
}

.note-section {
  background-color: #fff6cc;
  padding: 16px;
  border-radius: 8px;
  margin: 20px 0;
  color: #b88230;
  font-size: 14px;
}

.form-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;

  .form-info {
    display: flex;
    justify-content: space-between;
    color: #606266;
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: 16px;
  }

  .page-header {
    padding: 16px;
    margin-bottom: 20px;

    h1 {
      font-size: 20px;
    }
  }

  .main-content {
    padding: 16px;
  }

  .form-actions {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }

  .signature-cell {
    .signature-row {
      flex-direction: column;
      align-items: flex-start;

      .signature-input,
      .signature-date {
        width: 100%;
        max-width: none;
      }
    }
  }
}

@media print {
  .container {
    margin: 0;
    padding: 0;
    background: none;
    min-height: auto;
  }

  .page-header,
  .form-actions,
  .back-button {
    display: none !important;
  }

  .main-content {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .print-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px 0;
    border-bottom: 2px solid #000;

    h2 {
      font-size: 24px;
      font-weight: bold;
      margin: 0;
    }
  }

  .training-form {
    table {
      border: 1px solid #000;

      td {
        border: 1px solid #000;
        padding: 8px;
        font-size: 14px;
      }
    }

    .el-input__inner,
    .el-textarea__inner {
      border: none;
      padding: 0;
      font-size: 14px;
      color: #000;
      background: none;
    }
  }

  .section-header {
    border: 1px solid #ccc;
    margin: 20px 0;
  }

  .note-section {
    border: 1px solid #ccc;
    background: none;
    color: #000;
  }

  @page {
    margin: 2cm;
    size: A4 portrait;
  }
}
</style>